<template>
    <div class="businessMessage-wrapper">
        <IHeader class="header" back="true" title="任务信息"></IHeader>
        <list class="list" v-if="itemList && itemList.length > 0" @loadmore="loadmore">
            <cell class="cell" v-for="item in itemList" :key="item.id">
                <text class="time">{{item.createTime}}</text>
                <div class="content">
                    <text class="title">{{filterTitle(item.messageType)}}</text>
                    <div class="goods-content flex_row">
                        <image class="goods" :src="item.pic"></image>
                        <div class="goods-desc">
                            <text class="desc col_464646">{{item.content}}</text>
                            <text class="desc price col_ff0f37" v-if="item.messageType === '4'">￥{{item.price}}</text>
                        </div>
                    </div>
                </div>
            </cell>
        </list>
        <text class="noData" v-if="!itemList || itemList.length <= 0">暂无数据</text>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import { WxcLoading } from 'weex-ui'
import { queryDist } from '@/api/common'
import { getMessageCenter } from '@/api/user'

export default {
  name: 'businessMessage',
  data () {
    return {
      needMask: true, // 显示蒙版
      loadingShow: false, // loading
      pageNo: 1,
      pageSize: 10,
      itemList: [], // 数据列表
      typeList: [], // 类型列表
      loadEnd: false
    }
  },
  mounted () {
    const that = this
    that.$api.get(queryDist + 'transaction_message_type', {}, (res) => {
      that.typeList = res.data
      that.getDataList()
    })
  },
  methods: {
    getDataList () {
      const that = this
      let params = {
        pageNo: that.pageNo,
        pageSize: that.pageSize,
        moduleType: 3
      }
      that.$api.get(getMessageCenter, params, (res) => {
        if (res.data.records.length <= 0) {
          that.loadEnd = true
          return
        }
        that.itemList = that.itemList.concat(res.data.records)
      }, () => {}, true)
    },
    loadmore () {
      const that = this
      if (that.loadEnd) {
        return
      }
      that.pageNo++
      that.getDataList()
    },
    filterTitle (val) {
      const that = this
      let str = ''
      that.typeList.forEach((item) => {
        if (val === item.value) {
          str = item.description
        }
      })
      return str
    }
  },
  components: {
    IHeader,
    WxcLoading
  }
}
</script>

<style scoped>
    .flex_row {
        flex-direction: row;
    }
    .col_464646 {
        color: #464646;
    }
    .col_ff0f37 {
        color: #ff0f37;
    }
    .col_cecece {
        color: #cecece;
    }
    .list {
        min-height: 500px;
        margin-top: 88px;
        padding-left: 50px;
        padding-right: 50px;
    }
    .cell {
        padding-top: 24px;
        padding-bottom: 8px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .time {
        width: 350px;
        height: 44px;
        margin-bottom: 44px;
        color: #f5f5f5;
        line-height: 44px;
        font-size: 26px;
        text-align: center;
        background-color: #cecece;
        border-radius: 8px;
    }
    .title {
        margin-bottom: 20px;
        font-size: 30px;
        color: #464646;
    }
    .goods-content {
        /*align-items: center;*/
        /*justify-content: space-between;*/
    }
    .goods {
        width: 140px;
        height: 140px;
        margin-right: 24px;
    }
    .goods-desc {
        width: 486px;
    }
    .desc {
        height: 108px;
        lines: 3;
        text-overflow: ellipsis;
        font-size: 28px;
        line-height: 36px;
    }
    .price {
        font-weight: bold;
    }
    .noData {
        margin-top: 120px;
        font-size: 30px;
        color: #464646;
        text-align: center;
    }
</style>
